🌧️❄️🔥从静态卡片到动态天气引擎

457次阅读

共计 3970 个字符，预计需要花费 10 分钟才能阅读完成。

它曾只是一个简单的天气展示框：一个图标，几个数字，安静地挂在网页角落。如今，它会下雨、会下雪、会感知深色模式、会缓存数据、会温柔地对你说：“欢迎来自中国浙江杭州的朋友。”

这不是科幻电影，这是“天气胶囊”在短短一次迭代中的蜕变。

我们今天要做的，不是简单地罗列代码变更，而是像拆解一台精密仪器一样，看看这个看似微小的组件，是如何完成一次 现代 Web 开发范式的跃迁 的。

曾经的 weather.js，像一间手工作坊：

fetch('https://old-api.com/weather')
  .then(res => res.json())
  .then(data => {document.getElementById('temp').innerText = data.temp;
    document.getElementById('wind').innerText = data.wind;
    // ... 一堆 DOM 操作
  });

没有结构，没有状态管理，没有错误兜底。一切靠 if-else 和全局变量撑着。它能跑，但跑不快，也跑不远。

而今天的 WeatherWidget，已经是一座自动化工厂：

class WeatherWidget {constructor() {
    this.cacheKey = 'weather_data_cache';
    this.cacheTimeout = 5 * 60 * 1000;
    this.init();}

  init() {this.cacheElements();
    this.initCanvas();
    this.getCityAndFetchWeather();}
}

看到了吗？封装、初始化、职责分离。它不再是一堆零散的函数，而是一个有生命周期、有状态、有自我管理能力的“组件”。

这不只是代码风格的改变，这是从“能用”到“可维护、可扩展”的质变。

以前：用户刷新，立刻请求 API —— 即使前一秒刚拉过数据。

现在：它学会了“记性”。

cacheWeatherData(data) {
  const cacheItem = {
    data,
    timestamp: Date.now()};
  sessionStorage.setItem(this.cacheKey, JSON.stringify(cacheItem));
}

它把数据存进 sessionStorage，并打上时间戳。5 分钟内再次访问？直接读缓存，零延迟加载。

更妙的是，它还会“诚实”地告诉你：

if (useCachedData) {
  this.elements.lastUpdated.style.display = 'none';
  this.elements.cacheStatus.style.display = 'block'; // “ 使用缓存中 ”
}

用户体验的细节，就藏在这种“透明感”里。

旧版依赖外部脚本，甚至引入了疑似 Bot 检测的 crypto.min.js，像个戴着面具的访客。

新版干脆利落地甩开包袱，自己动手：

const parseTencentLocation = () => {return new Promise((resolve, reject) => {const script = document.createElement('script');
    script.src = `https://apis.map.qq.com/...&callback=tencentLocationCallback`;
    window.tencentLocationCallback = (response) => {resolve(response.result.ad_info);
    };
    document.body.appendChild(script);
  });
};

通过 JSONP + 动态 script 标签 + Promise 封装，实现了轻量、可控、可错误处理的定位逻辑。没有多余依赖，没有隐私疑云。

这才是现代前端该有的样子：精准调用，最小依赖，最大掌控。

以前的天气图标，是死的。

现在的天气图标，是活的。

updateWeatherAnimation(weatherType) {if (weatherType.includes(' 雨 ')) {const speedFactor = this.getWeatherIntensity(weatherType);
    this.animateRain(speedFactor);
  } else if (weatherType.includes(' 雪 ')) {this.animateSnow(speedFactor);
  }
}

它能根据“小雨”“中雨”“暴雨”动态调整雨滴密度和速度，甚至雪花的飘动还加入了 Math.sin 的摇摆效果：

flake.x += Math.sin(Date.now() * 0.001 + i) * flake.sway;

更绝的是，它还会“看脸下雪”：

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.ctx.fillStyle = isDarkMode ? 'rgba(220, 220, 220, 0.8)' : 'rgba(255, 255, 255, 0.8)';

深色模式下，雪花是灰白色，避免刺眼；浅色模式下，才是纯净的白。这种对细节的偏执，才是高级感的来源。

维度	旧版	新版
结构	全局函数 + 内联脚本	ES6 Class + 生命周期管理
数据流	直接操作 DOM	状态驱动（data → displayData）
错误处理	崩溃或静默失败	全链路 try/catch + 错误 UI 展示
可维护性	修改一处，牵动全身	方法职责单一，易于扩展

它不再只是一个“能动的东西”，而是一个 具备自我意识、状态管理和环境感知能力的 Web 组件。

当然，再精巧的组件，也需要你亲手点亮它的“生命之火”。

在部署这份代码之前，请务必完成三件“开箱仪式”：

替换天气 API 凭证
找到这行：
```
this.API_URL_BASE = 'https://cn.apihz.cn/api/tianqi/tqyb.php?id=id&key=key';
```
将 id 和 key 替换为你在 cn.apihz.cn 申请的真实凭证。否则，它将无法唤醒天气之灵。
注入地图灵魂
这一行也需更新：
```
const TENCENT_MAP_API_KEY = "KEY";
```
换成你在腾讯位置服务创建的 Web 端（JavaScript API）密钥。没有它，胶囊将“失明”，无法感知你身处何方。
准备一张默认天气图
如果某天 API 暂时沉默，它需要一张“备用脸”：
```
.weather-icon {background-image: url('URL');
}
```
把这个 URL 换成你托管在 CDN 或静态资源平台的默认天气图标 URL，确保风雨无阻，始终体面。
获取完整源码
本文所有代码并非空中楼阁，它来自一个真实进化的项目现场：
🌐 请前往 Gitee 仓库 lauwu/weather-allisu-2.0 获取完整项目结构、CSS 动效与可运行示例。
那里不只有代码，还有一段从粗糙到精致的演进日志——像一本开源的“组件成长日记”。

技术之美，从不藏于孤行代码，而在传承与重构之间。
拿走它，改写它，让它在你的页面上，下一场只属于你的雨。🌧️